﻿<RadzenRow Gap="2rem" RowGap="2rem" class="rz-m-0 rz-m-md-12">
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Default TextBox</RadzenText>
            <RadzenTextBox Change=@(args => OnChange(args, "TextBox")) Style="width: 100%" aria-label="Default TextBox" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Placeholder</RadzenText>
            <RadzenTextBox Placeholder="Search..." Change=@(args => OnChange(args, "TextBox with placeholder")) Style="width: 100%" aria-label="TextBox with placeholder" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">5 characters maximum</RadzenText>
            <RadzenTextBox @bind-Value=@value MaxLength="5" Change=@(args => OnChange(args, "TextBox with 5 maximum characters")) Style="width: 100%" aria-label="TextBox with 5 maximum characters" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Change on every input</RadzenText>
            <RadzenTextBox Immediate="true" Change=@(value => OnChange(value, "TextBox with change on every input")) Style="width: 100%" aria-label="TextBox with change on every input" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">Disabled TextBox</RadzenText>
            <RadzenTextBox Disabled="true" Style="width: 100%" aria-label="Disabled TextBox" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">TextBox with disabled AutoComplete</RadzenText>
            <RadzenTextBox AutoComplete="false" Style="width: 100%" aria-label="Disabled AutoComplete TextBox" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">TextBox with custom AutoComplete</RadzenText>
            <RadzenTextBox autocomplete="custom" Style="width: 100%" aria-label="Custom AutoComplete TextBox" />
        </RadzenCard>
    </RadzenColumn>
    <RadzenColumn Size="12" SizeMD="4">
        <RadzenCard>
            <RadzenText TextStyle="TextStyle.Subtitle2" TagName="TagName.H3">TextBox with predefined AutoCompleteType</RadzenText>
            <RadzenTextBox AutoCompleteType="AutoCompleteType.Sex" Style="width: 100%" aria-label="Custom AutoComplete TextBox" />
        </RadzenCard>
    </RadzenColumn>
</RadzenRow>

<EventConsole @ref=@console />

@code {
    string value;

    EventConsole console;

    void OnChange(string value, string name)
    {
        console.Log($"{name} value changed to {value}");
    }
}